<template>
	<section class="all_detail">
		<div class="now_time" v-show="activeP==='first'"><!--图片-->
			<span class="now_time" style="margin-right: 60px;">{{nowTime}}</span>
			今日开房数：<span class="now_num">{{nowNum}}</span>
			<span class="detail_data" @click="showOther('second')">详细数据</span>
			<!--<span class="check" @click="see">点击查看酒店侧效果</span>-->
			<!--<a class="check" href="">点击查看酒店侧效果</a>-->
		</div>
		<div class="" style="width: 100%;margin-top: 25px;" v-show="activeP==='first'">
				<!--<img src="../../assets/area.gif" style="width: 100%;height: 100%;"/>-->
				<video width="100%" height="100%" autoplay="autoplay">
					<source src="../../assets/allDetail.mp4" type="video/mp4"></source>
				</video>
		</div>
		
		<div class="now_table" v-show="activeP==='second'">
			<p style="text-align: center;"><span class="title">{{xx}}城市详细入住信息及对比处理状态明细表</span></p>
			<div class="daochu">
				<img class="back" src="../../assets/back.png" @click="showOther('first')" />
				<span class="daochu_shuju">导出数据</span>
				<table-plane @showOther="showOther" :tableLabel="tableLabel"  :tableData="tableData"></table-plane>
			</div>
		</div><!--表格-->
		
		<div class="detail" v-show="activeP==='third'"><!--详细信息-->
			<div class="dayin">
				<img class="back" src="../../assets/back.png" @click="showOther('second')" />
				<span class="daochu_shuju">打印</span>
		
			  <el-tabs style="margin-top: 20px;" v-model="activeName2" type="card" >
			    <el-tab-pane label="超级档案" name="first">
			    	<super-detail></super-detail>
			    </el-tab-pane>
			    <el-tab-pane label="关系分析" name="second">
			    	<rela-ayanc></rela-ayanc>
			    </el-tab-pane>
			  </el-tabs>
			</div>
		</div>
	</section>
</template>

<script>
	import {nowDate} from '@/js/common'
	import tablePlane from '@/components/table'
	import superDetail from '@/components/superDetail'
	import relaAyanc from '@/components/relaAyanc'
	export default{
		components:{
			tablePlane,
			superDetail,
			superDetail,
			relaAyanc
		},
		data(){
			return{
				nowTime:'',
				nowNum:352525,
				activeP:'first',
				activeName2: 'first',
				xx:'xx',
				tableData:[
					{
						checkInTime:'2018-09-30',
						name:'马威威',
						shengFZ:'440682454554544',
						sex:'男',
						type:'鸳鸯冰棺',
						level:'3',
						adress:'环市东路11号',
						result:'通过',
						normal:'不正常',
						stateDiy11:{
							xitong:'1',
							minjing:'0',
						},
						detailDiy:'',
					},
					{
						checkInTime:'2018-09-30',
						name:'马威威',
						shengFZ:'440682454554544',
						sex:'男',
						type:'鸳鸯冰棺',
						level:'3',
						adress:'环市东路11号',
						result:'通过',
						normal:'不正常',
						stateDiy11:{
							xitong:'1',
							minjing:'0',
						},
						detailDiy:'',
					},
					{
						checkInTime:'2018-09-30',
						name:'马威威',
						shengFZ:'440682454554544',
						sex:'男',
						type:'鸳鸯冰棺',
						level:'3',
						adress:'环市东路11号',
						result:'通过',
						normal:'不正常',
						stateDiy11:{
							xitong:'1',
							minjing:'0',
						},
						detailDiy:'',
					},
					{
						checkInTime:'2018-09-30',
						name:'马威威',
						shengFZ:'440682454554544',
						sex:'男',
						type:'鸳鸯冰棺',
						level:'3',
						adress:'环市东路11号',
						result:'通过',
						normal:'不正常',
						stateDiy11:{
							xitong:'1',
							minjing:'0',
						},
						detailDiy:'',
					},
					{
						checkInTime:'2018-09-30',
						name:'马威威',
						shengFZ:'440682454554544',
						sex:'男',
						type:'鸳鸯冰棺',
						level:'3',
						adress:'环市东路11号',
						result:'通过',
						normal:'不正常',
						stateDiy11:{
							xitong:'1',
							minjing:'0',
						},
						detailDiy:'',
					},
					{
						checkInTime:'2018-09-30',
						name:'马威威',
						shengFZ:'440682454554544',
						sex:'男',
						type:'鸳鸯冰棺',
						level:'3',
						adress:'环市东路11号',
						result:'通过',
						normal:'不正常',
						stateDiy11:{
							xitong:'1',
							minjing:'0',
						},
						detailDiy:'',
					},
					{
						checkInTime:'2018-09-30',
						name:'马威威',
						shengFZ:'440682454554544',
						sex:'男',
						type:'鸳鸯冰棺',
						level:'3',
						adress:'环市东路11号',
						result:'通过',
						normal:'不正常',
						stateDiy11:{
							xitong:'1',
							minjing:'0',
						},
						detailDiy:'',
					},
				],
				tableLabel:{
					checkInTime:{name:'入住时间',type:0},
					name:{name:'姓名',type:0},
					shengFZ:{name:'身份证',type:0},
					sex:{name:'入住时间',type:0},
					type:{name:'入住酒店/旅馆/民宿',type:0},
					level:{name:'星级',type:0},
					adress:{name:'详细地址',type:0},
					result:{name:'比对结果',type:0},
					normal:{name:'正常/异常',type:0},
					state:{
						name:'自动处理状态',
						type:1,
						title:['系统上报','通知民警']
					},
					detail:{
						type:2,
					}
				},
			}
		},
		methods:{
			showOther(val){/*跳去详细数据*/
				if(val!='first'&&val!='second'){
					const obj = val;
					val = 'third'
				}
				this.activeP = val;
			},
			handleClick(tab, event) {
	       	 console.log(tab, event);
	     	 },
	      see(){
//	      	window.location.href="../../dist1/index.html";
	      }
		},
		mounted(){
			this.nowTime  = nowDate()
			this.$store.commit('menuActive',this.$router.history.current.name);
		},
		watch:{
			activeP(newVal){/*顶部的导航栏*/
				if(newVal!='first'){
					this.$store.commit('isShowMenu',false);
				}else{
					this.$store.commit('isShowMenu',true);
				}
			}
		}
	}
</script>

<style>
	.all_detail .now_time{
		       font-size: 17px;
		    color: #fff;
		    margin: 44px 30px 0 170px;
		    /*text-align: center;*/
	}
	.all_detail .now_time .detail_data{
		font-size: 14px;
		color: #5ad0fb;
		margin-left: 30px;
		cursor: pointer;
	}
	.all_detail .now_time .now_num{
		font-size: 40px;
		color: #5ad0fb;
	}
	.all_detail .now_time .check{
		font-size: 16px;
		color: #5ad0fb;
		    float: right;
    	margin-top: 24px;
	}
	
	/***********************************/
	.all_detail .now_table{
		text-align: center;
		    margin: 50px 0;
	}
	.all_detail .now_table .title{
		font-size: 18px;
		color: #5ad0fb;
	}
	.all_detail .daochu{
		width: 1000px;
		height: 500px;
		margin: 20px auto;
		/*background: oldlace;*/
		text-align: left;
	}
	.all_detail .daochu_shuju{
		font-size: 16px;
		color: #5ad0fb;
		vertical-align: middle;
	}
	.all_detail .back{
		 width: 32px;
	    vertical-align: middle;
	    margin-left: 30px;
	    margin-right: 35px;
	    cursor: pointer;
	}
	/******************************************/
	.all_detail .dayin{
		width: 1000px;
		margin: 20px auto;
		/*background: oldlace;*/
		text-align: left;
	}
	.all_detail .el-tabs__item{
		color: #55c9f4;
	}
	.all_detail .el-tabs__item.is-active{
		color: #fff;
		background: #3789af;
	}
	.all_detail .el-tabs__item:hover{
		color: #55c9f4;
	}
	.all_detail .el-tabs__header{
		margin:unset;
	}
</style>